fix(web): prevent composer controls overlap on narrow windows (make plan sidebar responsive)#1198
Open
UtkarshUsername wants to merge 1 commit intopingdotgg:mainfrom
Open
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
added
size:M
- render Plan sidebar in a right-side sheet under 1180px - reuse shared right-panel layout constants for both plan and diff panels - add sidebar/sheet mode support to PlanSidebar styling and close handling
UtkarshUsername
force-pushed
the
fix/responsive-plan-sidebar
branch
from
b364790 to
b0f88a1
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You can view my issues and PRs at https://pr-navigator.pages.dev/t3code-utkarsh
Fixes #1197
What Changed
This PR makes the plan sidebar follow the same responsive behavior as the diff panel.
modeprop toPlanSidebarso the same component can render correctly in both inline and sheet contextsMade it turn into a sheet like the diff panel instead of just adjusting the composer controls, because this improves the whole experience on small windows and makes the design consistent, while also fixing the problem.
Why
Before this change, the plan sidebar always consumed inline width as a fixed column. On smaller viewports that made the chat area and composer noticeably cramped, while the diff panel already handled the same problem better by switching to a sheet.
Using the same responsive pattern for both panels keeps the UI more consistent and avoids penalizing smaller layouts.
UI Changes
Before:
(Video shared by Julius)
https://github.com/user-attachments/assets/6d83f027-ec3e-4026-8c8a-6130cc70a932
After:
Checklist
Note
Make plan sidebar responsive by rendering as a sheet on narrow windows
PlanSidebarSheetwrapper in ChatView.tsx that renders the plan sidebar inside a right-sideSheeton narrow screens, switching to inline mode on wider screens using a(max-width: 1180px)media query.modeprop to PlanSidebar.tsx ("sidebar"or"sheet") that controls whether the component uses fixed-width sidebar styles or full-width sheet styles.RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY,RIGHT_PANEL_SHEET_CLASS_NAME) into rightPanelLayout.ts and updates the diff panel in _chat.$threadId.tsx to use them, removing its local duplicate.Macroscope summarized b0f88a1.